<template>
  <div class="device_status">
    <span class="block_label_color small_label" :class="getDeviceStatusClass">{{data.deviceStatusLabel}}</span>
  </div>
</template>

<script>
// 设备状态字典
// 正常
const Normal = 'Normal'
// 维修中
const Repair = 'Repair'
// 保养中
const Maintain = 'Maintain'
// 生产中
const Produce = 'Produce'
// 报废
const Abandoned = 'Abandoned'
export default {
  name: 'DeviceStatus',
  props: {
    data: Object
  },
  computed: {
    /**
     * 判断设备状态
     * @param str 状态
     */
    getDeviceStatusClass() {
      switch (this.data.deviceStatusValue) {
        case Normal:
          return 'device_normal'
        case Repair:
          return 'device_repair'
        case Maintain:
          return 'device_maintain'
        case Produce:
          return 'device_produce'
        case Abandoned:
          return 'device_abandoned'
      }
    },
  }
}
</script>

<style lang="less" scoped>
  /*设备状态*/
  // 正常
  @mesDeviceNormal:#00a949;
  // 维修
  @mesDeviceRepair:#ff931f;
  // 保养
  @mesDeviceMaintain:#00b4ff;
  // 生产
  @mesDeviceProduce:#77b903;
  // 报废
  @mesDeviceAbandoned:#7e8e9f;
  .device_status{
    .block_label_color{
      color:#fff;
      // 正常
      &.device_normal{
        background-color: @mesDeviceNormal;
      }
      // 维修
      &.device_repair{
        background-color: @mesDeviceRepair;
      }
      // 保养
      &.device_maintain{
        background-color: @mesDeviceMaintain;
      }
      // 生产中
      &.device_produce{
        background-color: @mesDeviceProduce;
      }
      // 报废
      &.device_abandoned{
        background-color: @mesDeviceAbandoned;
      }
    }
  }
</style>
